<template>
<div class="box">

 <div>
   <h2 style="margin-left: 80px">今日为您推荐MV</h2>
   <div class="reMVBox">
   <div v-for="item in remv" :key="item" class="reMV">
         <img :src="item.picUrl" class="img" @click="playMV(item.id)">
         <play-circle-filled  class="i" @click="playMV(item.id)"/>
   </div>
  </div>
 </div>

  <div>
  <h2 style="margin-left: 80px;">今日为您推荐歌单</h2>
  <div class="replayListBox">
    <div v-for="item in replayList.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="item" class="replayList">
         <img v-lazy="item.picUrl" class="img1" @click="getplaylistdetail(item.id)">
         <p>{{ item.name }}</p>
   </div>
  </div>
  <el-pagination style="float: right"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   layout="total, prev, pager, next, jumper"
                   :total="replayList.length">
    </el-pagination>
 </div>

 <div style="margin-top: 50px;">
  <h2 style="margin-left: 80px;">推荐新音乐</h2>
  <div class="newsongsBox">
    <div v-for="item in newsongsList" :key="item" class="newsongsList">
         <img :src="item.picUrl" class="img2">
         <div style="margin-left: 10px;">
           <p>{{ item.name }}</p>
           <span style="margin-right: 10px;" v-for="item in item.song.artists" :key="item">{{ item.name}}</span>
         </div>
         <el-icon v-if="item.song.mvid" style="right: 60px;top:30px" @click="playMV(item.song.mvid)"><youtube-outlined /></el-icon>
         <el-icon style="right: 30px;top:30px"  @click="play(item.id)"><VideoPlay /></el-icon>
         
   </div>
  </div>
 </div>

  <div style="margin-top: 50px;">
    <h2 style="margin-left: 80px;">推荐节目</h2>
    <div class="programBox">
      <div v-for="item in programList" :key="item" class="programList">
        <img :src="item.picUrl" class="img3" @click="playMV(item.id)">
        <play-circle-filled  class="i" @click="playMV(item.id)"/>
         <p>{{item.name}}</p>
        </div>
      </div>
    </div>


</div>
</template>

<script setup>
import {nextTick, onMounted, ref,} from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
import {useplayListStore,useSongsStore,useMVStore} from "@/Store/Pinia/pinia"
import {baseURL} from "@/request/index.js";
console.log(baseURL)
const playListStore = useplayListStore();
const songsStore = useSongsStore();
const mvstore=useMVStore();

const remv=ref([])
const replayList=ref([])
const newsongsList=ref([])
const programList=ref([])
const mvurl=ref()
const  router=useRouter()
const currentPage=ref(1)
const pageSize=ref(10)

// function handleSizeChange(val) {
//   console.log(`每页 ${val} 条`);
//   currentPage.value= 1;
//   pageSize.value = val;
// }

function handleCurrentChange(val) {
  console.log(`当前页: ${val}`);
  currentPage.value = val;
}
function getreMV(){
    axios.post(baseURL+"/personalized/mv?").then((res)=>{  //获取推荐MV
      remv.value=res.data.result;
    })
}
function getplaylist(){
    axios.post(baseURL+"/personalized?limit=24").then((res)=>{  //获取推荐歌单
      replayList.value=res.data.result;

    })
}
 function getplaylistdetail(id){
    playListStore.getcurrentplayList(id);
    router.push({path: '/homePage/songsList/1'});
}
function getnewsongs(){
    axios.post(baseURL+"/personalized/newsong").then((res)=>{  //获取推荐最新歌曲
      newsongsList.value=res.data.result;
      console.log(newsongsList.value)
    })
}

function getProgram(){
  axios.post(baseURL+"/personalized/privatecontent").then((res)=>{  //获取推荐节目
    console.log(res);
    programList.value=res.data.result;
})
}
function play(id) {
  console.log(id);
      songsStore.getcurrentplay(id);
      songsStore.getlyc(id);
      axios.post(baseURL+"/song/url?id=" + id).then((res) => {  //获取歌曲地址
        console.log(res.data.data[0].url);
        songsStore.getSongUrl(res.data.data[0].url)
        console.log(songsStore.picUrl);
        songsStore.readyplay();
      })
    }
function playMV(mvid){
  axios.post(baseURL+"/mv/url?id="+ mvid).then((res) => { //获取MV地址
    mvurl.value = res.data.data.url;
  }).then(()=>{
    mvstore.$patch((state)=>{
      state.mvid=mvid;
    })
    router.push({name:'songsMV',params:{mvurl:mvurl.value}})
  })
}

    // song/detail
onMounted(()=>{
    getreMV();
    getplaylist();
    getnewsongs();
    getProgram();
})
</script>

<style scoped>
.box{
  width: 100%;
  height: 528px;
  overflow-y:scroll;
  overflow-x: hidden;
}
.reMVBox{
  width: 100%;
  height: 220px;
  display: flex;
  margin-left: 80px;
}

.reMVBox .reMV{
  width: 200px;
  height: 200px;
  margin-right: 250px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:All 0.4s ease-in-out;
}

.reMVBox .reMV .img{
  width: 200px;
  height: 200px;
  position: absolute;
  /*object-fit:cover;*/
  left: 0;
  top:0;
  transition: all 1s;
  z-index: 1;
}
.reMVBox .reMV .img:hover{
  transform: scale(1.2);
}
.reMVBox .reMV .i{
  color: white;
  position: absolute;
  left: 60px;
  top:50px;
  opacity:0;
  font-size: 80px;
  z-index: 2;
}

.reMVBox .reMV .i:hover{
  opacity: 1;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-property: opacity;
  -webkit-animation-name: xing;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 2s;
}
.reMVBox .reMV:hover{
  /*transform:translate(0,-20px);*/
}
.replayListBox{
  width: 100%;
  height: 600px;
  display: flex;
  margin-left: 80px;
  flex-wrap:wrap;
}
.replayListBox .replayList{
  width: 200px;
  height: 250px;
  margin-right: 30px;
  margin-bottom: 30px;
  cursor: pointer;
  transition:All 0.4s ease-in-out;
}
.replayListBox .replayList:hover{
  color: #8e09dc;
  transform:translate(0,-20px);
  /*background-image: url("../../assets/img/bk7.jpg");*/
}

.replayListBox .replayList .img1{
  width:100%;
  object-fit: cover;
}

.newsongsBox{
   width: 100%;
   height: 600px;
   display: flex;
   margin-left: 80px;
   flex-wrap:wrap;
}

.newsongsList{
     width: 40%;
     height: 100px;
     margin-right: 20px;
     margin-bottom: 20px;
     display: flex;
     position: relative;
     cursor: pointer;
}

.newsongsList .el-icon{
  position: absolute;
  font-size:20px;
}
.newsongsList:hover{
  cursor: pointer;
}
.newsongsBox .newsongsList .img2{
    width: 80px;
    height: 80px;
}

.programBox{
  width: 100%;
  height: 300px;
  display: flex;
  margin-left: 80px;
  flex-wrap:wrap;
}

.programBox .programList{
  width: 300px;
  height: 250px;
  margin-right: 50px;
  cursor: pointer;
  position: relative;
  transition:All 0.4s ease-in-out;
}

.programBox .programList .img3{
  width: 100%;
  height: 150px;
  position: absolute;
}
.programBox .programList:hover{
  transform:translate(0,-20px);
}
.programBox .programList .i{
  color: white;
  position: absolute;
  left: 120px;
  top:30px;
  opacity:0;
  font-size: 80px;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-property: opacity;
  -webkit-animation-name: xing;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 1s;
}
.programBox .programList .i:hover{
  opacity: 1;
}
</style>